---
title: "Tabs"
description: A component that organizes content into separate panels, allowing users to switch between sections without reloading the page.
order: 3
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Tabs.html#props"]
---


## Basic
Tabs divide content into sections, allowing users to easily switch between them.
<How toUse="navigation/tabs/tabs-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/tabs
```


## Manual installation
```bash
npm i react-aria-components
```

<SourceCode toShow='tabs' />

## Anatomy
```
import { Tab, TabList, TabPanel, Tabs } from "@/components/ui/tabs"
```

```
<Tabs aria-label="Recipe App">
  <TabList>
    <Tab id="i">Ingredients</Tab>
    <Tab id="m">Meal Plans</Tab>
  </TabList>
  <TabPanel id="i">
    Check the list of ingredients needed for your chosen recipes.
  </TabPanel>
  <TabPanel id="m">
    Discover curated meal plans to simplify your weekly cooking.
  </TabPanel>
</Tabs>
```

## With icons
If you want to include icons in your tabs, it's simple to do. This tab setup handles icons smoothly, maintaining a clean design.
<How toUse="navigation/tabs/tabs-icons-demo" />

## Orientation
You can set the orientation of the tabs to either `horizontal` or `vertical`.
<How toUse="navigation/tabs/tabs-orientation-demo" />

## Links
If you want to use tabs as navigational links, you can add the `href` prop to the `Tab` component. This will automatically change the cursor to a pointer.
<How toUse="navigation/tabs/tabs-link-demo" />

## Disabled
You can disable all tabs by setting the `isDisabled` prop to `true`.
<How toUse="navigation/tabs/tabs-disabled-demo" />

You can also disable individual tabs by setting the `isDisabled` prop for each one, like this:
```tsx
<Tab isDisabled id="c">Contact</Tab>
<Tab isDisabled id="a">About Us</Tab>
```
